<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
    .static {
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        font-size: 24px;
        color: darkmagenta;
        font-weight: bold;
        margin: 10px;
    }

    .a {
        border: 3px solid darkolivegreen;
    }

    .b {
        background: deeppink;
    }

    .c {
        border-radius: 50%;
    }

    .main {
        margin: 20px;
    }

    .nav {
        display: flex;
    }

    .nav-item {
        width: 100px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        color: yellowgreen;
        background: palevioletred;
        border-radius: 10px;
        font-size: 14px;
        margin: 10px;
        text-align: center;
    }

    .nav-active {
        background: crimson;
        color: #fff;
    }

    .content-item {
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        background: crimson;
        color: cyan;
        border-radius: 20px;
        margin: 10px;

    }
</style>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <h3 v-if='flag'>Vue + React 保证你可以就业</h3>
        <h2 v-else> 小程序也是非常不错的 </h2>
        <button @click='flag=!flag'>切换flag</button>
        <!-- v-if和v-else必须配合使用且中间不能有其他数据隔开 -->
        <template v-if='ok'>
            <div>
                <h1>Title</h1>
                <p>Paragraph 1</p>
                <p>Paragraph 2</p>
            </div>
        </template>
        <div v-if='score>90'>
            A
        </div>
        <div v-if='score>80'>
            B
        </div>
        <div v-if='score>70'>
            C
        </div>
        <div v-if='score>60'>
            D
        </div>
        <div v-else>
            E
        </div>
        <div>
            <h2 v-show="show">v-show 通过 display 来控制显示和隐藏 会始终渲染到DOM 只是简单的样式切换</h2>
            <h2 v-show="!show"> v-show 没有 v-hide 这个配对的指令 </h2>
            <button @click="show=!show">修改show</button>
        </div>
        <div v-if='flag'>
            <p v-for="(l,i) in list">
                {{l}} -- {{i}}
            </p>
        </div>
        <div v-if='obj'>
            <h2>username:{{obj.username}}</h2>
            <h2>age: {{obj.age}}</h2>
            <h2>phone:{{obj.phone}}</h2>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 'v-if && v-show 切换显示和隐藏',
                flag: true,
                ok: !!1,
                score: 88,
                show: true,
                list: ["Vue", "React", "Angular"],
                obj: null
            },
            mounted() {
                setTimeout(() => {
                    this.obj = {
                        username: "zuozuomu",
                        age: 18,
                        phone: 18012341234
                    }
                },8000)
            },
        })
    </script>
    <!-- 
      v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 
      表达式的值 为 false 则什么都不做 不会渲染DOM 
      template 包裹的空元素    没有任何效果

      v-else 必须 与它最近的 v-if 匹配 

      v-show   指令通过 display 来控制显示和隐藏 
      带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 

      v-if vs v-show 
      v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 
      v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    

      使用场景 (使用频率)
      v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 
      v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 

      v-if 与 v-for 一起使用 (不推荐)
      如果一定要用  
      v-for 比 v-if 有更高的优先级 
      v-if 写在 v-for(循环) 的外面 

      异步数据 
      错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 
      TypeError: Cannot read property 'username' of null
      Cannot read property 'username' of undefined 
     -->
</body>

</html>